<template>
	<view class="start" v-if="show" :style="{backgroundColor:backgroundColor}">
		<view v-if="Animation" class="skip" :style="skipPositionStyle" @click="onSkip">跳过 {{time2}}</view>
		<swiper class="swiper" :autoplay="Animation" :circular="Animation" :interval="interval"
			@change="onChangeSwiper">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item" :style="bgStyle" @click="closeStartAd(index)">
					<image class="image" :src="item" mode="widthFix"></image>
					<view class="after" :style="afterStyle"></view>
				</view>
			</swiper-item>
			<!-- autoplay -->
		</swiper>
		<view class="swiper-dot" v-if="list.length>1">
			<view class="view" :style="index === current ? currentStyle : ''" :class="{'active': index === current}"
				v-for="(item, index) in list" :key="index" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			Animation: { // 是否开启时间倒计时
				type: Boolean,
				default: true
			},
			list: {
				type: Array,
				default () {
					return []
				},
				required: true
			},
			hasTabbar: {
				type: Boolean,
				default: false,
			},
			hasNavbar: {
				type: Boolean,
				default: false,
			},
			interval: {
				type: Number,
				default: 3000
			},
			time: {
				type: Number,
				default: 3
			},
			url: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			afterColor: {
				type: String,
				default: ''
			},
			currentColor: {
				type: String,
				default: '#333'
			}
		},
		data() {
			return {
				current: 0,
				show: true,
				timer: null,
				time2: this.time
			}
		},
		watch: {
			time2(val) {
				console.log(val);
				if (this.Animation && val <= 0) {
					this.onSkip()
				}
			}
		},
		computed: {
			bgStyle() {
				return this.obj2strStyle({
					'background-color': this.bgColor
				})
			},
			afterStyle() {
				return this.obj2strStyle({
					'background-color': this.afterColor
				})
			},
			currentStyle() {
				return this.obj2strStyle({
					'background-color': this.currentColor
				})
			},
			skipPositionStyle() {
				const {
					statusBarHeight
				} = uni.getSystemInfoSync()
				if (!this.hasNavbar) {
					return this.obj2strStyle({
						'top': `${statusBarHeight*2 + 88 + 30}rpx`
					})
				}
				return this.obj2strStyle({
					'top': '30rpx'
				})
			}
		},
		mounted() {
			let that = this;
			if (this.hasTabbar) {
				uni.hideTabBar()
			}
			if (this.Animation) {
				// 开启倒计时
				this.timer = setInterval(() => {
					that.time2--
				}, 1000)
			}
		},
		methods: {
			closeStartAd(index) { // 点击关闭
				if (index == this.list.length - 1) {
					// 关闭
					this.onSkip();
				}
			},
			obj2strStyle(obj) {
				let style = ''
				for (let key in obj) {
					style += `${key}:${obj[key]};`
				}
				return style
			},
			onSkip() {
				const {
					url,
					hasTabbar,
					timer
				} = this;
				clearInterval(timer)
				this.show = false
				if (hasTabbar) {
					uni.showTabBar()
				}
				if (url) {
					uni.reLaunch({
						url: url,
					})
				}
			},
			onChangeSwiper(e) {
				console.log(e);
				this.current = e.detail.current
			}
		}
	}
</script>

<style scoped>
	/* $nav-height: 44px; */
	.start {
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.skip {
		position: absolute;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.2);
		color: #fff;
		right: 30rpx;
		font-size: 14px;
		width: 70px;
		height: 30px;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper {
		height: 100vh;
		width: 100vw;
	}

	.swiper-item {
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		background-color: transparent;
	}

	.swiper-item .after {
		width: 100vw;
		height: 500rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
	}

	.swiper-item .image {
		height: 100vh;
		width: 100vw;
		display: block;
		position: relative;
		z-index: 2;
	}

	.swiper-dot {
		position: absolute;
		width: 100vw;
		left: 0;
		bottom: 100rpx;
		z-index: 3;
		display: flex;
		justify-content: center;
	}

	.swiper-dot .view {
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		margin: 0 6px;
	}

	.swiper-dot .view.active {
		width: 16px;
		border-radius: 24rpx;
	}
</style>